<template>
    <div class="wrapper">
        <div class="titled">
            <span>基本信息</span>
        </div>
        <ul class="market">
            <li v-if="infoDetail.phoneNo">
                <label>手机号</label>
               {{infoDetail.phoneNo}}
            </li>
            <li>
                <label>商户名称</label>
                {{infoDetail.customerName}}
            </li>
            <li>
                <label>商户编号</label>
                {{infoDetail.customerNo}}
            </li>
            <li>
                <label>注册时间</label>
                {{ infoDetail.createTime }}
            </li>
                 <!-- <li class="noborder">
                   <label>入网时间</label>
                   <input type="text" disabled v-model="createTime"/>
                 </li> -->
        </ul>
        <div class="titled">
            <span>费率信息</span>
        </div>

        <ul class="market">
            <li>
                <label>T0贷记卡</label>
                {{hlb.creditT0.rate}}
            </li>
            <li>
                <label>T1借记卡</label>
                {{hlb.debitCardT1.rate}}
            </li>
            <li>
                <label>扫码</label>
                {{ hlb.sm.rate }}
            </li>
            <li>
                <label>享惠费率</label>
                {{ hlb.discount.rate }}
            </li>
            <li>
                <label>借记卡封顶费率</label>
                {{ hlb.jjk.rate }}
            </li>
        </ul>
        <div class="titled" v-if="posList.length">
            <span>终端信息</span>
        </div>
        <ul class="market" v-if="posList.length">
            <li v-for="item in posList" :key="item.posSn">
                <label>{{ item.componentType }}</label>
                {{item.tusn}}
            </li>
        </ul>
    </div>
</template>

<script>
import { defineComponent } from 'vue'
import { findByCustNo } from '@/api/merchants'
import { parseTime } from "@/utils/utils"
export default defineComponent({
    name: 'detail',
    setup() {
        const route = useRoute()
        const router = useRouter()
        console.log(route.query.CUSTOMER_NAME)
        const state = reactive({
            infoDetail: {},
            creditT0: {},
            hlb: {
                creditT0: {},
                debitCardT1: {},
                discount: {},
                ysf: {},
                sm:{},
                jjk: {}
            },
            posList: [],
            customerNo: '',
            aaa: ''
        })
        const getFindByCustNo = () => {
            findByCustNo({ customerNo: route.query.CUSTOMER_NO }).then(res => {
                console.log(res)
                // res.object.custInfoBean.createTime =  state.parseTime(res.object.custInfoBean.createTime)
                state.infoDetail = res.object.custInfoBean
                state.infoDetail.createTime = parseTime(res.object.custInfoBean.createTime)
                state.posList = res.object.posList

                    for (var key in res.object) {
                        if (
                            res.object[key].settleCycle === 'T0' &&
                            res.object[key].cardType === 'CREDIT_CARD' &&
                            res.object[key].feeType === 'STANDARD'
                        ) {
                            res.object[key].rate = res.object[key].rate + '%'
                            state.hlb.creditT0 = res.object[key]
                        }
                        if (
                            res.object[key].settleCycle === 'T1' &&
                            res.object[key].cardType === 'DEBIT_CARD' &&
                            res.object[key].feeType === 'STANDARD'
                        ) {
                            res.object[key].rate = res.object[key].rate + '%'
                            state.hlb.debitCardT1 = res.object[key]
                        }
                        // 享惠费率
                        if (res.object[key].feeType === 'DISCOUNT') {
                            res.object[key].rate = res.object[key].rate + '%'
                            state.hlb.discount = res.object[key]
                        }
                        // 借记卡封顶
                        if(res.object[key].feeType === 'STANDARD' && res.object[key].settleCycle === 'T1' && res.object[key].cardType === 'DEBIT_CARD'){
                            state.hlb.jjk = res.object[key]
                        }
                        // 扫码
                        if(res.object[key].brandCode === 'YSF'){
                          res.object[key].rate = res.object[key].rate + '%'
                          state.hlb.sm = res.object[key]
                        }
                    }
                    if (res.object.DEFAULT_DEFAULT) {
                        res.object.DEFAULT_DEFAULT.rate = res.object.DEFAULT_DEFAULT.rate + '%'
                        state.hlb.ysf = res.object.DEFAULT_DEFAULT
                    }
            })
        }
        getFindByCustNo()

        return {
            ...toRefs(state)
        }
    }
})
</script>

<style scoped lang="scss">
.wrapper {
    padding: 0 10px;
    box-sizing: border-box;
    height: 100vh;
    background-color: #f7f8fa;
    .market {
        padding: 10px;
        background-color: #ffffff;
        box-sizing: border-box;
        line-height: 30px;
        border-radius: 5px;
        li {
            display: flex;
        }
        input {
            background-color: transparent;
            flex: 1;
            border: none;
        }
        label {
            display: block;
            width: 8em;
        }
    }
}
.titled {
    font-size: 16px;
    font-family: Microsoft YaHei;
    text-align: center;
    background-color: #f7f8fa;
    font-weight: 400;
    color: #000000;
    padding: 20px;
    opacity: 1;
}
</style>
